<template>
    <div class='root'  @click='skipClick(resItem)'>
        <div class='left-side'>
            <img :src="resItem.image_path|imgFormat" alt="">
            <div class='new-sign' v-show='resItem.is_new'>
                <span>新品</span>
            </div>
        </div>
        <div class="right-side">
            <section class='shop-name'>
                <h3 :class='resItem.is_premium?"prefix":""'>{{resItem.name}}</h3>
                <div v-show='resItem.supports.length>0'>
                    <div v-for="item in resItem.supports" class='support'>
                        {{item.icon_name}}
                    </div>
                </div>
            </section>
            <section class='sell-rate'>
                <div>
                    <!--font-size : 10 不加：号会认为是字符串-->
                    <Rater 
                        disabled
                        active-color='#ffaa0c'
                        :font-size = 10
                        v-model="resItem.rating" 
                        slot="value">
                    </Rater>
                    <span style='color:red;'>{{resItem.rating}}</span>
                    <span>月售{{resItem.recent_order_num}}单</span>
                </div>
                <div>
                    <span v-if='delivery' class='ontime'>准时达</span>
                    <span class='deliver'>{{delivery}}</span>
                </div>
            </section>
            <section class='fee'>
                <div>
                    <span>￥{{resItem.float_minimum_order_amount}}元起送/</span>
                    <span>配送费约￥{{resItem.float_delivery_fee}}</span>
                </div>
                <div>
                    <span class='distance'>{{resItem.distance|distanceFormat}}</span>
                    <span class='lead-time' v-show='resItem.order_lead_time>0'>/{{resItem.order_lead_time}}分钟</span>
                </div>
            </section>
        </div>
    </div>
</template>
<script>
    import { Rater,Cell } from 'vux'
    export default{
        props:['resItem'],
        components:{
            Rater,
            Cell,
        },
        computed:{
            delivery:function(){
                if(!this.resItem.delivery_mode){
                    return
                }
                return this.resItem.delivery_mode.text
            }
        },
        methods:{
            skipClick:function(data){
                location.href = '#/home/'+ data.authentic_id
            }
        }
    }
</script>
<style scoped>
    .root{
        border-top: 1px solid #eee;
        display: flex;
        /*justify-content: space-between;*/
    }
    .root .left-side img{
        width: 5rem;
        margin: 1rem;
    }
    .prefix::before{
        /*content:'品牌';*/
        background-color: #ffd930;
        color: #52250a;
        content: "\54C1\724C";
    }
    /*新品样式*/
    .left-side{
        position: relative;
    }
    .new-sign{
        position: absolute;
        top: 0;
        width: 30px;
        height: 30px;
        background-color: #26ce61;
        color: #fff;
        text-align: center;
        line-height: 30px;
        /*旋转问题？*/
        /*transform: rotate(45deg);
        transform-origin: 100% 0%;*/
    }
    .new-sign span{

    }
    .right-side{
        width: calc(100% - 7rem);
        padding: 1.4rem 1.4rem 1.4rem 0;
    }
    .right-side section{
        display: flex;
        justify-content: space-between;
    }
    .shop-name h3{
        margin: 0;
        color: #333;
        font-weight: 700;
        font-size: 1.5rem;
    }
    .shop-name>div{
        display: flex;
        text-align: center;
    }
    .shop-name .support{
        border: 1px solid #eee;
        width: 1.3rem;
        height: 1.3rem;
        margin: 0 0.2rem;
        color: rgb(153, 153, 153); 
        border-color: rgb(221, 221, 221);
    }
    .right-side .sell-rate{
        margin-top: 0.5rem;
    }
    .right-side .ontime{
        color: #2395ff;
        border: 1px solid #44a5ff;
        background-color: #fff;
        border-radius: 2px;
    }
    .right-side .deliver{
        color: #fff;
        border: 1px solid #fff;
        background-color: #2395ff;
    }
    .fee{
        margin-top: 0.5rem;
    }
    .fee .distance{
        color: #999;
    }
    .fee .lead-time{
        color:#2395ff; 
    }
</style>